<%@ page language="java" contentType="text/html;UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@include file="../base.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>支出管理</title>
<script >
function open1(){
	$('#waddtype').window('open');
}

function close1(){
	$('#waddtype').window('close');
}

function open2(){
	$('#waddmoneylist').window('open');
	var curr_time = new Date();   
   	var strDate = curr_time.getFullYear()+"-";
    strDate += curr_time.getMonth()+1+"-";
    strDate += curr_time.getDate();
    

	$("#addlistdate").datebox("setValue", strDate);   
}

function close2(){
	$('#waddmoneylist').window('close');
}

function addtype(){
	var str = $('#typestr').val();
	if(str=="")
		{
		$('#validate').html("<font color='red'>请填不要空着</font>");
		return;
		}
	else
		{
		$('#ff').submit();
		}
	
}

function addmoneylist()
{
	var typeid = $('#addlisttype').combobox('getValue');
	var date = $('#addlistdate').combobox('getValue');
	var use = $('#addlistuse').val();
	var mood = $('#addlistmood').val();
	var amount = $('#addlistamount').val();
	$('#validateaddlist').html("");
	if(date=="")
		{
		$('#validateaddlist').html("<font color='red'>日期不能不填</font>");
		return;
		}
	else if(typeid==-1)
		{
		$('#validateaddlist').html("<font color='red'>请选择花钱的种类</font>");
		return;
		}
	else if(amount==""||amount<0||amount>10000)
		{
		$('#validateaddlist').html("<font color='red'>请填入正确的数字</font>");
		return;
		}
	else if(use=="")
		{
		$('#validateaddlist').html("<font color='red'>请选择具体用途</font>");
		return;
		}
	else
		{
		
		$.post("<c:url value="/balance/addmoneylist.html"/>","date="+date+"&typeid="+typeid+"&use="+use+"&mood="+mood+"&amount="+amount,
				function show1(data,statusText){
				$.messager.show({
					title:'My Title',
					msg:data,
					showType:'show'
				});
			},"html");
			$('#waddmoneylist').window('close');
			$('#consumelist').datagrid('reload');
		}
	
}

function deletmoneylist(ids)
{

	$.post("<c:url value="/balance/deletemoneylist.html"/>","ids="+ids,
			function show1(data,statusText){
			$.messager.show({
				title:'My Title',
				msg:data,
				showType:'show'
			});
		},"html");
	$('#consumelist').datagrid('reload');
}


$(function(){
	$('#consumelist').datagrid({
		title:'我的消费单',
		iconCls:'icon-save',
		width:1050,
		height:350,
		nowrap: true,
		autoRowHeight: false,
		striped: true,
		collapsible:true,
		url:'<c:url value="/balance/allmoneylist.html"/>',
		sortName: 'date',
		sortOrder: 'desc',
		remoteSort: false,
		idField:'id',
		frozenColumns:[[
           // {field:'ck',checkbox:true},
            {title:'编号',field:'id',width:60,sortable:true}
		]],
		columns:[[
			{field:'type',title:'花钱类别',width:120},
			{field:'amount',title:'金额',width:120},
			{field:'use',title:'具体用途',width:350},
			{field:'mood',title:'当时的心情',width:250},
			{field:'date',title:'时间',width:150}
		]],
		pagination:true,
		rownumbers:true,
		toolbar:[{
			id:'btnadd',
			text:'增加消费记录',
			iconCls:'icon-add',
			handler:function(){
				$('#btnsave').linkbutton('enable');
				open2();
			}
		},{
			id:'btncut',
			text:'删除消费记录',
			iconCls:'icon-cut',
			handler:function(){
				var size = $('#consumelist').datagrid('getSelections').length;
				if(size==0)
					{
					$.messager.alert('My Title','请至少选择一条记录!','消息');
					return;
					}
				var ids = [];
				var rows = $('#consumelist').datagrid('getSelections');
				for(var i=0;i<rows.length;i++){
					ids.push(rows[i].id);
				}
				
				$.messager.confirm('My Title', '确认删除?', function(r){
					if (r){
						deletmoneylist(ids.join(':'));
					}
				});
				$('#consumelist').datagrid('clearSelections');
			}
		}]
	});
	var p = $('#consumelist').datagrid('getPager');
	$(p).pagination({
		pageSize: 10,//每页显示的记录条数，默认为10 
        pageList: [10],//可以设置每页记录条数的列表 
        beforePageText: '第',//页数文本框前显示的汉字 
        afterPageText: '页    共 {pages} 页', 
        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',  
	});
	
});



</script>
</head>
<body>
<img src="<c:url value="/ico/egg.jpg"/>" height="50"><font class="thick">我的钱到哪儿去了</font><br>
<div class="demo-info">
	<div class="demo-tip icon-tip"></div>
	<div>管理一下我的花钱，看看钱都用到哪里去了</div>
</div>		
<a href="<c:url value="/App.html"/>" class="easyui-linkbutton">首页</a>
<a href="<c:url value="/balance/static.html"/>" class="easyui-linkbutton">图表分析</a><br>

花钱的种类: 
<input id="cc" class="easyui-combobox" 
			name="language"
			data-options="
			url:'<c:url value="/balance/alltypes.html"/>',
			valueField:'id',
			textField:'text',
			panelHeight:'auto',
			editable:false 
			">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="javascript:open1()">添加花钱类别</a><br>			
			

<div id="waddtype" class="easyui-window" data-options="title:'添加花钱种类',closed:true" style="width:300px;height:250px;padding:5px;">
		<div class="easyui-layout" data-options="fit:true">
		<div data-options="region:'center',border:false" style="padding:10px;background:#fff;border:1px solid #ccc;">
			<!-- 表单-->
			<div style="background:#fafafa;padding:10px;width:200px;height:100px;">
	    	<form id="ff" method="post" novalidate action="<c:url value="/balance/addtype.html"/>">
	        <div>
	            <label for="type">花钱的种类:</label>
	            <input id ="typestr" class="easyui-validatebox"  type="text" name="typestr" data-options="required:true"></input>
	        </div>
	        <div id = "validate"></div>
	    	</form>
	    	</div>
	    	</div>
	    	<!-- 表单完-->
			<div data-options="region:'south',border:false" style="text-align:right;padding:5px 0;">
				<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="addtype()">保存</a>
				<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="javascript:close1()">取消</a>
			</div>
		</div>
</div>

<div id="waddmoneylist" class="easyui-window" data-options="title:'添加消费记录',closed:true" style="width:300px;height:450px;padding:5px;">
		<div class="easyui-layout" data-options="fit:true">
		<div data-options="region:'center',border:false" style="padding:10px;background:#fff;border:1px solid #ccc;">
			<!-- 表单-->
			<div style="background:#fafafa;padding:10px;width:200px;height:300px;">
	    	<form id="mm" method="post" novalidate action="<c:url value="/balance/addmoneylist.html"/>">
	    	
	    	<div>
	            <label for="date">日期:<font color="red">*</font></label><br>
	             <input id="addlistdate" class="easyui-datebox" required="required" name="typestr" data-options="editable:false" ></input> 
	        </div>
	    	<div>
	            <label for="use">花钱的种类:<font color="red">*</font></label>
	            <input id="addlisttype" class="easyui-combobox" 
				name="language"
				data-options="
				url:'<c:url value="/balance/alltypes.html"/>',
				valueField:'id',
				textField:'text',
				panelHeight:'auto',
				editable:false 
				">
			  </div>
			<div>
	            <label for="addlistuse">金额:<font color="red">*</font></label><br>
	            <input id="addlistamount" class="easyui-numberbox" data-options="min:0,max:9999.99,precision:2,required:true" size="15" maxlength="7"/>
	        </div>
	        <div>
	            <label for="addlistuse">具体用途:<font color="red">*</font></label>
	            <textarea name="message" id="addlistuse" style="height:60px;resize: none;"></textarea>  
	        </div>
	        <div>
	            <label for="addlistmood">当时的心情:</label>
	            <textarea name="message" id="addlistmood" style="height:60px;resize: none;"></textarea>  
	        </div>
	        
	        <div id = "validateaddlist"></div>
	    	</form>
	    	</div>
	    	</div>
	    	<!-- 表单完-->
			<div data-options="region:'south',border:false" style="text-align:right;padding:5px 0;">
				<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="addmoneylist()">保存</a>
				<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="javascript:close2()">取消</a>
			</div>
		</div>
</div>
<script>
$('#addlistdate').datebox({
    formatter: function(date){ return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();},
    parser: function(date){ return new Date(Date.parse(date.replace(/-/g,"/")));}
});
</script>
<table id="consumelist"></table>


<%@include file="../botton.jsp" %>
</body>
</html>